@tailwind base;
@tailwind components;
@tailwind utilities;
/*
1. 自定义类选择器 需要放入@layer指令指定的层级才能和修饰符共用
2. @base层定义基础样式 | @components层定义第三方组件样式 | @utilities层定义当前应用样式
3. 自定义选择器是优先考虑 自定义值 -> @apply -> | 定义tailwind组件

*/

:root{
    --theme-box-whith: 300px;
}

.cc{
    color: red;
}

.ccc{
    @apply text-cyan-300;
}
/*
可配合 hover使用
*/
@layer components{
    .bb{
        @apply bg-blue-500;
        @apply text-white;
    }
}

@layer utilities{
    .btn{
        @apply px-8 py-3 text-white rounded
    }
    .btn-primary{
        @apply bg-blue-700;
    }
    .btn-success{
        @apply bg-green-700;
    }
    .btn-danger{
        @apply bg-red-700;
    }
    .btn-warning{
        @apply bg-yellow-700;
    }
    /*动画*/
    @keyframes move {
        0%{
            left: -110%;
            top: 90%;
        }
        50%{
            left: 10%;
            top: -30%;
        }
        100%{
            left: -10%;
            top: -10%;
        }
    }

    .animate-move{
        animation: move .7s;
        left: -10%;
        top: -10%;
    }
}


